<template>
  <!-- 顶部导航栏 -->
  <div class="tabbar">
    <div class="banner tabbar_banner">
      <!-- 左边 -->
      <div class="tabbar_left">
        <router-link class="logo" to="/home">
          <img src="../assets/logo.png" alt="" />
        </router-link>
        <div class="navList">
          <!-- <div v-for="nItem in navMes" :key="nItem.luyou" @click="go(nItem.luyou)" :to="nItem.luyou">
            <span>{{nItem.name}}</span>
          </div> -->
          <router-link
            v-for="nItem in navMes"
            :key="nItem.luyou"
            :to="nItem.luyou"
            >{{ nItem.name }}</router-link
          >
          <!-- <router-link  v-for="(nItem,nIndex) in navMes" :key="nItem.luyou" :to="{name:nItem.luyou, query: {tId:nIndex+1}}">{{nItem.name}}</router-link> -->
        </div>
      </div>
      <!-- 右边 -->
      <div class="tabbar_right">
        <!-- 搜索框 -->
        <div>
          <!-- <el-input
            :placeholder="defaultValue"
            v-model="input"
            @keyup.enter.native="toSearch(input)">
            <i slot="suffix" class="el-input__icon el-icon-search" @click="toSearch(input)"></i>
          </el-input> -->
        </div>

        <!-- 登录注册个人中心 -->
        <div class="tabbar_right_mine">
          <i class="el-icon-search tabbar_right_search" @click="toSearch"></i>
          <span @click="toMessage" class="tabbar_message" v-show="isLogin == true">
            消息
            <!-- <el-badge
              v-show="isLogin == true"
              :value="0"
              class="tabbar_right_mine_mes"
              >消息
            </el-badge> -->
          </span>
          <el-button
            type="text"
            v-show="isLogin == false"
            class="tabbar_right_mine_btn"
            @click="toLogin"
            >登录/注册</el-button
          >

          <el-dropdown @command="handleCommand" v-show="isLogin == true">
            <img
              :src="userMes.uAvatar"
              class="tabbar_right_mine_avatar"
            />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="toMine"
                >个人中心</el-dropdown-item
              >
              <el-dropdown-item command="toTougao">投稿管理</el-dropdown-item>
              <hr />
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <!-- 登录注册弹窗 -->
    <!-- <el-dialog
      :visible.sync="centerDialogVisible"
      @closed="resetForm"
      width="35%"
      center
    >
      <div class="dialog">
        <div class="dialog_title">
          <h3
            @click="showForm(true)"
            class="becomeHand"
            :class="isShowForm == true ? 'dialog_blue' : ''"
          >
            登录
          </h3>
          <span class="dialog_title_shu">|</span>
          <h3
            @click="showForm(false)"
            class="becomeHand"
            :class="isShowForm == false ? 'dialog_blue' : ''"
          >
            注册
          </h3>
        </div>
        <el-form
          v-show="isShowForm"
          :model="loginForm"
          :rules="rules"
          ref="loginForm"
          label-width="100px"
          class="dialog_ruleForm"
        >
          <el-form-item label="账号" prop="username">
            <el-input
              v-model="loginForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="loginForm.password"
              autocomplete="off"
              show-password
              @click.native="isSee = false"
              @blur="isSee = true"
              @keyup.enter.native="toLogin(loginForm)"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="" style="width:100px;" @click="showForm(false)"
              >注册</el-button
            >
            <el-button
              type="primary"
              style="width:100px;"
              @click="toLogin(loginForm)"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
        <el-form
          v-show="isShowForm == false"
          :model="registerForm"
          :rules="rules"
          ref="registerForm"
          label-width="100px"
          class="dialog_ruleForm"
        >
          <el-form-item label="邮箱" prop="uEmail">
            <el-input v-model="registerForm.uEmail" autocomplete="off">
              <i
                slot="suffix"
                class="el-input__icon el-icon-mouse"
                style="font-size:24px;"
                @click="getVerification(registerForm.uEmail)"
              ></i>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="verification">
            <el-input
              v-model.number="registerForm.verification"
              autocomplete="off"
              @click.native="isSee = false"
              @blur="isSee = true"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              style="margin-left:60px;"
              @click="toRegister(registerForm)"
              >登录/注册</el-button
            >
          </el-form-item>
        </el-form>
        <p class="dialog_explain">
          未注册过本网站的邮箱号，我们将自动帮您注册账号
        </p>
        <p class="dialog_explain">
          登录或完成注册即代表您同意<span class="becomeHand dialog_blue"
            >用户协议</span
          >和<span class="becomeHand dialog_blue">隐私政策</span>
        </p>
        <img
          src="/static/tabbar/left01.png"
          v-show="isSee == true"
          class="dialog_bgLeft"
          alt=""
        />
        <img
          src="/static/tabbar/left02.png"
          v-show="isSee == false"
          class="dialog_bgLeft"
          alt=""
        />
        <img
          src="/static/tabbar/right01.png"
          v-show="isSee == true"
          class="dialog_bgRight"
          alt=""
        />
        <img
          src="/static/tabbar/right02.png"
          v-show="isSee == false"
          class="dialog_bgRight"
          alt=""
        />
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
import { isvalidUsername, isvalidPass } from '../utils/validate'
export default {
  inject: ['reload'], //注入依赖
  name: 'Tabbar',
  data () {
    var validUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else if (!isvalidUsername(value)) {
        callback(
          new Error(
            '用户名要求数字、字母、下划线的组合 数字和字母必须存在 长度为4-15个字符'
          )
        )
      } else {
        return true
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!isvalidPass(value)) {
        callback(new Error('密码以字母开头 长度在6~16之间 只能包含字母、数字'))
      } else {
        return true
      }
    }
    return {
      defaultValue: 'admin1',
      input: '',
      userMes: {},
      isLogin: false, //是否登录
      isShowForm: true, //是否显示表单
      isSee: true, //两个小人是否闭眼
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        uEmail: '',
        verification: ''
      },
      rules: {
        username: [
          { required: true, validator: validUsername, trigger: 'blur' }
        ],
        password: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        uEmail: [
          { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        verification: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
          // { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      },
      centerDialogVisible: false,
      state: '',
      timeout: null,
      searchValue: '',
      navMes: [
        {
          name: '快搜',
          luyou: '/search'
        },
        {
          name: '学术搜索',
          luyou: '/scholar'
        },
        {
          name: '推荐网站',
          luyou: '/wiki'
        }
      ]
    }
  },
  mounted (){
    this.$bus.$on("isLogin",(msg)=>{
      this.isLogin = msg
      console.log(msg)
    })
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    // 登录成功后获取用户信息
    getUserInfo () {
      const params = {}
      var token = this.cookies.getToken('X-Token')
      if (token != undefined) {
        this.isLogin = true
        // params.token = this.$cookieStore.getCookie('X-Token')
        params.token = token
        this.$axios
          .getUserInfo(params)
          .then(res => {
            console.log(res)
            if (res.code == 20000) {
              this.userMes = res.data
              this.cookies.setUid(res.data.uId)
            }
          })
          .catch(error => {
            this.$message.error(error.message)
            this.isLogin = false
            this.cookies.removeToken('X-Token')
            this.cookies.removeUid('uId')
          })
      }
    },
    toMessage () {
      console.log('去消息界面')
      this.$router.push('/message')
    },
    handleCommand (command) {
      // console.log(command)
      if (command == 'toMine') {
        this.toMine()
      } else if (command == 'toTougao') {
        this.toTougao()
      } else if (command == 'logout') {
        this.logout()
      }
    },
    // 去个人主页
    toMine () {
      var userMes = JSON.stringify(this.userMes)
      this.$router.push({
          path: '/mine',
          query: {
            userMes
          } // 要传递的参数
        })
      // console.log('个人中心',this.userMes)
      // this.$router.push('/mine')
    },
    // 去投稿管理
    toTougao () {
      // console.log('去投稿管理')
      this.$router.push('/submit')
    },
    // 退出
    logout () {
      // console.log('退出')
      const params = {}
      // params.token = this.$store.getters.getToken
      // params.token = this.$cookieStore.getCookie('X-Token')
      params.token = this.cookies.getToken('X-Token')
      this.$axios.logout(params).then(res => {
        // console.log(res)
        this.cookies.removeToken('X-Token')
        this.cookies.removeUid('uId')
        this.isLogin = false
        this.$router.push('/')
        this.reload()
      })
    },
    // showForm (boolen) {
    //   this.isShowForm = boolen
    //   this.$refs.loginForm.resetFields()
    //   this.$refs.registerForm.resetFields()
    // },
    // // 关闭弹窗，清除元素信息
    // resetForm () {
    //   this.$refs.loginForm.resetFields()
    //   this.$refs.registerForm.resetFields()
    // },

    toLogin(){
      this.$router.push('/login')
    },

    // 注册
    // toRegister (form) {
    //   console.log(form)
    //   // const params={};
    //   // params.uEmail = form.uEmail;
    //   // if(form.uEmail!=''&&form.verification!=''){
    //   //   // 查询数据库是否有当前邮箱
    //   //   this.$axios.getUserByEmail(params).then(res=>{
    //   //     console.log(res)
    //   //   })
    //   //   // 没有的话，注册账号
    //   // }
    // },
    // // 获取验证码
    // getVerification (uEmail) {
    //   const params = {}
    //   params.uEmail = uEmail
    //   if (uEmail != '') {
    //     // 查询数据库是否有当前邮箱
    //     this.$axios.getUserByEmail(params).then(res => {
    //       console.log(res)
    //     })
    //     // 没有的话，注册账号
    //   }
    // },
    // 搜索页面
    toSearch () {
      // 跳转页面
      this.$router.push('/searchList')
    }
  }
}
</script>
<style scoped>
.tabbar {
  position: fixed;
  top: 0;
  background: #fff;
  width: 100%;
  z-index: 20;
  box-shadow: 0px 3px 5px 0px rgb(208 205 205 / 17%);
}

.tabbar_banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 左边 */
.tabbar_left {
  display: flex;
  flex: 1;
  align-items: center;
}

.tabbar_left .logo img {
  width: 30px;
  flex: 1;
  margin-top: 20px;
}

.tabbar_left .navList {
  display: flex;
  flex: 9;
  justify-content: space-around;
}
.el-input__icon {
  cursor: pointer;
}
.tabbar_right {
  display: flex;
  justify-content: space-between;
  flex: 1.5;
  align-items: center;
  margin-left: 100px;
}

.tabbar_right_search > input {
  border: none;
  background-color: #f7f4f4;
  outline: none;
}

.tabbar_right_mine {
  display: flex;
  align-items: center;
}
.tabbar_right_search {
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  margin-right: 10px;
}
.tabbar_right_mine_avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
.tabbar_right_mine_btn {
  color: #000;
  font-size: 16px;
}
.tabbar_right_mine_mes {
  margin: 0 10px;
  padding: 0 5px;
  cursor: pointer;
}
.el-dialog--center .el-dialog__body {
  padding: 0;
}
.dialog {
  position: relative;
  padding-bottom: 60px;
}
.dialog_ruleForm {
  padding-right: 50px;
}
.dialog_explain {
  text-align: center;
  font-size: 12px;
}
.dialog_explain > span {
  margin: 0 5px;
}
.dialog_blue {
  color: rgb(112 197 245);
}
.dialog_title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.dialog_title_shu {
  margin: 0 10px;
}
.v-modal {
  background: none;
}
.dialog_bgLeft {
  position: absolute;
  bottom: 0;
  left: 0;
  float: left;
  width: 100px;
}
.dialog_bgRight {
  position: absolute;
  bottom: 0;
  right: 0;
  float: right;
  width: 100px;
}
.el-form-item {
  margin-bottom: 30px;
}
.tabbar_message {
  margin: 0 10px;
  cursor: pointer;
}
</style>
